<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-04-02 17:33:24
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-26 10:26:47
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamReport/ReportCustomerList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-03-07 13:45:59
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-18 20:02:47
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamReport/ReportCustomerList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div>
      <div
        class="bg-red-50 h-[52px] pl-4 flex items-center bg-gradient-to-r from-[#FFF2E5] to-[#FFFFFF]"
      >
        <div class="font-bold text-[#262626]">客户情况</div>
      </div>

      <template
        v-for="customerInfo of teamReportCustomerList"
        :key="customerInfo.customerId"
      >
        <div class="flex flex-row">
          <div class="flex flex-col flex-auto bg-white">
            <div class="p-4">
              <div class="flex flex-row mb-4">
                <img class="mr-3" src="@/icons/svg/myXmate/company_logo.svg" alt="" />
                <div>
                  <h3 class="font-bold text-[#262626] mb-1">
                    {{ customerInfo.customerName }}
                  </h3>
                  <van-text-ellipsis
                    :content="`负责人: ${customerInfo.salesName}  部门: ${customerInfo.deptName}`"
                    class="text-[#8C8C8C] text-[12px]"
                    :rows="1"
                    expand-text="展开"
                    collapse-text="收起"
                  />
                </div>
              </div>

              <div class="flex flex-row">
                <div class="flex flex-col mr-28">
                  <p class="text-[#8C8C8C] text-[12px]">沟通次数</p>
                  <p>{{ customerInfo.confCount }}</p>
                </div>

                <div class="flex flex-col">
                  <p class="text-[#8C8C8C] text-[12px]">沟通目标达成率</p>
                  <p>{{ customerInfo.visitTargetAchievementRate }}%</p>
                </div>
              </div>
            </div>

            <div
              class="flex flex-row items-center text-[#436BFF] bg-white ml-2 text-[14px]"
              @click="toggleDetail(customerInfo)"
            >
              {{
                detailMap[customerInfo.customerId]?.show ? "收起沟通详情" : "展开沟通详情"
              }}
              <van-icon
                class="ml-1"
                :name="
                  detailMap[customerInfo.customerId]?.show ? 'arrow-up' : 'arrow-down'
                "
                color="#436BFF"
              />
            </div>
            <div class="bg-white" v-if="detailMap[customerInfo.customerId]?.show">
              <template v-if="detailMap[customerInfo.customerId].data">
                <template v-if="detailMap[customerInfo.customerId].data.length > 0">
                  <div class="flex flex-col w-full">
                    <div
                      v-for="meetItem of detailMap[customerInfo.customerId].data"
                      :key="meetItem"
                      class="flex flex-row p-4 w-full"
                    >
                      <div class="flex flex-col items-center w-[20px] h-full mr-2">
                        <div
                          class="w-[1px] h-full flex flex-col items-center bg-[#BFBFBF] pt-1"
                        >
                          <div
                            class="flex items-center justify-center w-[14px] h-[14px] rounded-full bg-[#436BFF]"
                          >
                            <div class="bg-white w-[8px] h-[8px] rounded-full"></div>
                          </div>
                        </div>
                      </div>
                      <div class="w-full flex-auto">
                        <div class="flex flex-row mb-2">
                          <div class="text-[#262626] px-1">
                            {{ meetItem.createdTime.slice(0, 16) }}
                          </div>
                          <div
                            v-if="meetItem.stageName"
                            class="text-[#436BFF] bg-[#E6EBFD] text-[14px] px-2 py-1 ml-1 rounded-sm"
                          >
                            {{ meetItem.stageName }}
                          </div>
                        </div>

                        <div
                          class="bg-[#F9FAFC] p-4 rounded-md text-sm flex-auto box-border"
                        >
                          <div class="mb-2">
                            <h4 class="text-[#8C8C8C]">客户参与人：</h4>
                            <p class="text-[#262626]">
                              {{ meetItem.attendees || "-" }}
                            </p>
                          </div>
                          <div class="mb-2" v-if="meetItem.salesGoal">
                            <h4 class="text-[#8C8C8C]">目标：</h4>
                            <div class="text-[#262626]">
                              {{ meetItem.salesGoal || "-" }}

                              <span
                                class="text-[#436BFF] ml-2 rounded-sm bg-[#E6EBFD] px-1 py-1"
                              >
                                {{ meetItem.salesAchievementStatus }}
                              </span>
                            </div>
                          </div>

                          <div class="mb-2" v-if="meetItem.salesAchievementAnalysis">
                            <h4 class="text-[#8C8C8C]">达成分析：</h4>
                            <p class="text-[#262626]">
                              {{ meetItem.salesAchievementAnalysis || "-" }}
                            </p>
                          </div>

                          <div class="mb-2" v-if="meetItem.achieveResult">
                            <h4 class="text-[#8C8C8C]">成果：</h4>
                            <p class="text-[#262626]">
                              {{ meetItem.achieveResult || "-" }}
                            </p>
                          </div>

                          <div class="mb-2" v-if="meetItem.nextPlan">
                            <h4 class="text-[#8C8C8C]">下一步：</h4>
                            <p class="text-[#262626]">
                              {{ meetItem.nextPlan || "-" }}
                            </p>
                          </div>

                          <div class="mb-2" v-if="meetItem.existRisk">
                            <h4 class="text-[#8C8C8C]">风险：</h4>
                            <p class="text-[#262626]">
                              {{ meetItem.existRisk || "-" }}
                            </p>
                          </div>

                          <div class="mb-2" v-if="meetItem.customerRequirement">
                            <h4 class="text-[#8C8C8C]">客户需求：</h4>
                            <p class="text-[#262626]">
                              {{ meetItem.customerRequirement || "-" }}
                            </p>
                          </div>

                          <div class="mb-2" v-if="meetItem.coreSummary">
                            <h4 class="text-[#8C8C8C]">内容概要：</h4>
                            <p class="text-[#262626]">
                              {{ meetItem.coreSummary || "-" }}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <div v-else class="w-full h-[80px] flex items-center justify-center">
                  <p>暂无数据</p>
                </div>
              </template>
              <div class="p-6" v-else>
                <van-loading>加载中...</van-loading>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 客户列表 -->
      <van-back-top />
    </div>
  </div>
</template>

<script setup>
import { computed, ref, defineProps } from "vue";
import { useMyXmateStore } from "@/store";

const props = defineProps({
  startTime: {
    type: String,
  },
  endTime: {
    type: String,
  },
});

const myXmateStore = useMyXmateStore();

const teamReportCustomerList = computed(() => {
  return myXmateStore.teamReportCustomerList;
});

const detailMap = ref({});

function toggleDetail(item) {
  const { customerId } = item;
  let dic = detailMap.value[customerId] || {};
  const isShow = dic.show == true;
  dic.show = isShow ? false : true;
  if (!isShow) {
    getReportDetail(customerId);
  }
  detailMap.value[customerId] = dic;
}

async function getReportDetail(customerId) {
  // const parameter = {
  //   pageNumber: 1,
  //   pageSize: 200,
  //   startTime: "2025-03-01 00:00:00",
  //   endTime: "2025-03-31 23:59:59"
  // };

  const parameter = {
    searchKey: "",
    pageSize: 10,
    pageNumber: 1,
    orderBy: "meetCount",
    asc: false,
    categoryIds: [],
    tags: [],
    dptIds: [],
    userIds: [],
    startTime: props.startTime,
    endTime: props.endTime,
  };
  parameter.customerId = customerId;
  const data = await myXmateStore.getTeamReportDetailAction(parameter);
  detailMap.value[customerId].data = data;
}
</script>

<style lang="less" scoped></style>
